import Heading from "./Heading";
import Section from "./Section";

const SectionApp = () => {
	return (
		<Section>
			<Heading>Title</Heading>
			<Post title="Hello traveller!" body="Read about my adventures." />
			<AllPosts />
		</Section>
	);
}

const AllPosts = () => {
	return (
		<Section>
			<Heading>Posts</Heading>
			<RecentPosts />
		</Section>
	);
}

const RecentPosts = () => {
	return (
		<Section>
			<Heading>Recent Posts</Heading>
			<Post
				title="Flavors of Lisbon"
				body="...those pastéis de nata!"
			/>
			<Post
				title="Buenos Aires in the rhythm of tango"
				body="I loved it!"
			/>
		</Section>
	);
}

const Post = ({ title, body } : { title: string, body: string }) => {
	return (
		<Section isFancy={true}>
			<Heading>{title}</Heading>
			<p><i>{body}</i></p>
		</Section>
	);
}

export default SectionApp;
